<template>
    <div>
        <el-form :rules="rules" ref="forgetForm" :model="forgetForm" class="loginContainer" label-width="100px" :label-position="labelPosition">
            <h3 class="loginTitle">找回密码</h3>
            <el-form-item prop="email" label="邮箱：">
                <el-input v-model="forgetForm.email" type="text" placeholder="请输入邮箱"/>
            </el-form-item>
            <el-form-item prop="emailCode" label="验证码：">
                <el-input v-model="forgetForm.emailCode" type="text" placeholder="点击发送验证码" style="width: auto"/>
                <el-button size="small" type="primary" @click="getEmailCode" v-if="timingInt <= 0">
                    点击发送
                </el-button>
                <el-button size="small" type="primary" disabled v-else>{{timingInt}}</el-button>
            </el-form-item>
            <el-form-item prop="password" label="密码：">
                <el-input type="password" v-model="forgetForm.password" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码：">
                <el-input type="password" v-model="forgetForm.confirmPassword" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item>
                <el-button type="info " @click="outForgetPassword">取消</el-button>
                <el-button type="primary" @click="getBackPassword">确认</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import eventBus from "./eventBus";
    export default {
        name: "forgetPassword",
        data() {
            return {
                labelPosition:'right',
                timingInt: 0,
                forgetVisible: false,
                forgetForm: {
                    email: '',
                    emailCode: '',
                    password: '',
                    confirmPassword: ''
                },
                loginServiceApi: this.$store.state.loginServiceApi,
                rules: {
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {
                            pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
                            required: true,
                            message: "邮箱格式不正确",
                            trigger: 'blur'
                        }
                    ],
                    emailCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    confirmPassword: [
                        {required: true, message: '请再次输入验证码', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            getBackPassword() {
                this.$refs.forgetForm.validate(data => {
                    if (data) {
                        this.postRequest(this.loginServiceApi+'/login/getBackPassword',this.forgetForm).then(res => {
                            if (res.code == 200) {
                                // this.$store.commit('initForgetVisible', true)
                                eventBus.$emit("toLogin",this.forgetForm.email);
                                this.$emit("openForget",false)
                            }
                        })
                    }
                })
            },
            getEmailCode() {
                var that = this
                this.$refs.forgetForm.validateField('email', valid => {
                    if (!valid) {
                        this.getRequest(this.loginServiceApi + '/login/getEmailCode?email=' + this.forgetForm.email).then(res => {
                            if (res.code == 200) {
                                that.timingInt = 60;
                                var myTiming = setInterval(function () {
                                    that.timingInt--;
                                    if (that.timingInt <= 0) {
                                        clearInterval(myTiming);
                                    }
                                }, 1000)
                            }
                        })
                    }
                })
            },
            outForgetPassword(){
                this.$emit("openForget",false)

            },
        }
    }
</script>

<style scoped>
    .loginTitle{
        text-align: center;
    }
    .el-button{
        float: right;
        margin: 0px 10px;
    }
    ::v-deep .el-input {
        width: -webkit-fill-available;
    }
</style>
